<template>
  <div class="app-container">
    <span v-if="isChecked == 1" class="serviceInfo">服务审核中...</span>
    <el-tabs v-model="activeName" class="pad_30">
      <el-tab-pane label="会员卡组合" name="first">
        <div class="divBar" />
        <h5 class="titleInfo">会员卡组合</h5>
        <el-form
          ref="form"
          class="form"
          :model="form"
          label-width="150px"
          :rules="rule"
          :disabled="disabled"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="商家券库" prop="shop_tickets_str">
                <el-input v-model="form.shop_tickets_str" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-col :span="4">
                <el-form-item label="PLUS会员卡模板" prop="province_name">
                  <el-input
                    v-model="form.province_name"
                    size="small"
                    class="min_width"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-input v-model="form.template_name" />
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
        </el-form>
        <!-- 商家卡券列表 -->
        <div class="df">
          <span class="col_666" />
          <h5 class="font_16">商家卡券</h5>
        </div>
        <!--  v-loading="tableLoading" -->
        <div v-loading="tableLoading" class="listDiv">
          <el-table :data="shopData" style="width: 100">
            <el-table-column prop="ticket_type" label="优惠券类型" />
            <el-table-column prop="shop_name" label="适用范围" />
            <el-table-column prop="name" label="优惠券名称" />
            <el-table-column prop="service_name" label="对应服务名称" />
            <el-table-column prop="num" label="数量">
              <template slot-scope="scope">
                <span>{{ scope.row.num=1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="有效期">
              <template slot-scope="scope">
                <span>{{ scope.row.start_time+' 至 '+scope.row.end_time }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 平台卡券 -->
        <div class="df mt_20">
          <span class="col_666" />
          <h5 class="font_16">平台卡券</h5>
        </div>
        <div v-loading="tableLoading" class="listDiv">
          <el-table :data="goodsData" style="width: 100">
            <el-table-column prop="ticket_type" label="优惠券类型" />
            <el-table-column prop="scope" label="适用范围" />
            <el-table-column prop="type_name" label="优惠券名称" />
            <el-table-column prop="available" label="优惠券对应商品" />
            <el-table-column prop="type_money" label="优惠券金额" />
            <!-- <el-table-column prop="tiket_count" label="数量" /> -->
            <el-table-column prop="num1" label="数量">
              <template slot-scope="scope">
                <span>{{ scope.row.num1=1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="有效期">
              <template slot-scope="scope">
                <span>{{ scope.row. start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 医美卡券 -->
        <div class="df mt_20">
          <span class="col_666" />
          <h5 class="font_16">医美卡券</h5>
        </div>
        <div v-loading="tableLoading" class="listDiv">
          <el-table :data="beautyData" style="width: 100">
            <el-table-column prop="ticket_type" label="优惠券类型" />
            <el-table-column prop="hospital_name" label="使用范围" />
            <el-table-column prop="type_name" label="优惠券名称" />
            <el-table-column prop="project_name" label="优惠券对应项目" />
            <!-- <el-table-column prop="tiket_count" label="数量" /> -->
            <el-table-column prop="num2" label="数量">
              <template slot-scope="scope">
                <span>{{ scope.row.num2=1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="有效期">
              <template slot-scope="scope">
                <span>{{ scope.row. start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="mt_20">
          <el-button size="mini" class="active">1</el-button>
          <el-button size="mini" @click="handleChange(1)">2</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="基础信息" name="second">
        <el-form
          ref="formInfo"
          :model="formInfo"
          label-width="150px"
          :rules="rules"
          :disabled="disabled"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="PLUS会员卡名称" prop="name" required>
                <el-input v-model="formInfo.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会员卡描述" prop="desc" required>
                <el-input
                  v-model="formInfo.desc"
                  type="textarea"
                  size="large"
                  :rows="4"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="会员卡原价" prop="origin_price" required>
                <el-input v-model="formInfo.origin_price" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="会员卡售价" prop="sale_price" required>
                <el-input v-model="formInfo.sale_price" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="服务费" prop="service_price" required>
                <el-input v-model="formInfo.service_price" />
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="购买须知" prop="purchase_note" required>
                <Tinymce v-model="formInfo.purchase_note" :readonly="1" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="mt_20">
          <el-button size="mini" @click="handleChange(2)">1</el-button>
          <el-button size="mini" class="active">2</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getDetails } from '@/api/plusVipList'
import Tinymce from '@/components/Tinymce'

export default {
  name: 'PlusVipInfo',
  components: { Tinymce },

  data() {
    return {
      activeName: 'first',
      form: {
        shop_tickets_str: '',
        province_name: '',
        template_name: ''
      },
      shopData: [], // 商家列表
      goodsData: [], // 平台
      beautyData: [], // 医美
      disabled: true,
      isChecked: '', // 判断是否审核中
      clo_66b: 0,
      // 基础信息
      formInfo: {
        name: '',
        desc: '',
        origin_price: '',
        sale_price: '',
        service_price: '',
        purchase_note: ''
      },
      rule: {},
      rules: {},
      tableLoading: true
    }
  },
  created() {
    const id = this.$route.query.id
    this.isChecked = this.$route.query.check_status
    this.detailsList(id)
  },
  methods: {
    // 详情列表
    detailsList(e) {
      getDetails(e)
        .then(res => {
          if (res.data.code == 200) {
            // console.log(res);
            const resData = res.data.data
            this.form.shop_tickets_str = resData.shop_tickets_str
            this.form.template_name =
                            resData.template_info.template_name
            this.form.province_name =
                            resData.template_info.province_name
            this.shopData = resData.shop_tickets_list
            this.goodsData = resData.goods_tickets_list
            this.beautyData = resData.beauty_tickets_list
            this.formInfo = resData.card_info
            // this.isChecked = resData.card_info.check_status;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
          this.tableLoading = false
        })
        .catch(err => {
          this.errorStatus(err.msg)
          this.tableLoading = false
        })
    },
    // 下一步
    handleNext() {
      this.activeName = 'second'
    },
    // 切换1，2
    handleChange(e) {
      if (e == 1) {
        this.activeName = 'second'
      } else if (e == 2) {
        this.activeName = 'first'
      }
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      })
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, 'success')
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, 'error')
    }
  }
}
</script>
<style scoped>
.app-container {
    padding: 0px !important;
}
/* 服务审核中信息样式 */
.serviceInfo {
    display: block;
    padding: 20px;
    font-size: 30px;
    color: orange;
}
.pad_30 {
    padding: 0 30px 20px 30px;
}
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
    width: 236px;
}
.font_16 {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    margin: 0;
    margin-bottom: 10px;
}
.mt_20 {
    margin-top: 20px;
}
.el-textarea__inne {
    width: 300px;
    min-height: 50px;
    box-sizing: border-box;
}
/* 提示语样式 */
.spanINfo {
    width: 500px;
    display: block;
    color: #444;
}
.active {
    background: #66b1ff;
    color: #fff;
}
.col_666 {
    display: inline-block;
    width: 7px;
    height: 20px;
    background: #409eff;
    margin-right: 3px;
    border-radius: 4px;
}
.df {
    display: flex;
}
.min_width {
    min-width: 100px;
}
</style>
